<template>
  <div id="weather">
    <iframe scrolling="no" :src='src'  frameborder="0" width="100%"
      :height="height" allowtransparency="true"></iframe>

  </div>
</template>

<script>
  import {
    Toast
  } from 'mint-ui';
  import axios from "@/http/api";
  import {city} from "@/common/js/city"
  export default {
    name: 'weather',
    data() {
      return {
        src:"",
        height:500
      }
    },

    created() {
      this.height = document.body.offsetHeight
      let src = "https://tianqiapi.com/api.php?style=tw&skin=pitaya&cityid="
      var that = this;
      this.$wx.ready(function () {
        that.$wx.getLocation({
          type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
          success: function (res) {
           
            var latitude = res.latitude ; // 纬度，浮点数，范围为90 ~ -90
            var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
            var speed = res.speed; // 速度，以米/每秒计
            var accuracy = res.accuracy; // 位置精度
             
              for(var i =0;i<city.length;i++){
              
                if(Math.abs(city[i].lat - latitude) <0.05&&Math.abs(city[i].lon- longitude) < 0.05){
                  
                  that.src = src+ city[i].id
                 
                  break;
                }
            }
            if(i===city.length) that.src = src;
            

          }
        });
         
      });
      this.$wx.error(function (res) {
        that.src = src;
        alert("调用微信jsapi返回的状态:" + res.errMsg);
      });
    },
    methods: {

      handleQRCode() {
        var that = this;
        this.$wx.scanQRCode({
          needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            that.order = res.resultStr.indexOf(',') > -1 ? res.resultStr.split(',')[1] : res
              .resultStr; // 当needResult 为 1 时，扫码返回的结果
          }
        });
      },

    },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style type="text/css" lang="stylus">
#weather
  text-align center

</style>
